<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tongcheng</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/change.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<!--头部-->
<header>
    <div class="head-inner">
        <div class="header">
            <div class="header-left left">
                <ul>
                    <li>
                        <span class="header-left-city">北京</span>
                        <a class="header-left-changecity">[切换城市]</a>
                    </li>
                    <li class="last">
                        <a class="item" href="#">同城帮首页</a>
                    </li>
                </ul>
            </div>
            <div class="header-right right">
                <ul>
                    <li>
                        <a class="item" href="#">登录</a>
                    </li>
                    <li>
                        <a class="item" href="#">注册</a>
                    </li>
                    <li>
                        <a class="item" href="#">我的订单</a>
                    </li>
                    <li><span class="item" style="padding:0 10px"><a href="javascript:;">在线客服</a>（9:00-21:00）</span>
                    </li>
                    <li class="has-hot-num has-sub"><span class="item">客户服务</span>
                        <p class="sub">
                            <a target="_blank" href="#">帮助中心</a>
                            <a target="_blank" href="#">维修付款</a>
                        </p>
                    </li>
                    <li>
                        <a class="item" href="#">论坛</a>
                    </li>
                    <li class="last">
                        <a href="#" style="color:#F00;padding:0 0 0 10px">投诉建议</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</header>
<section>
    <!--    导航-->
    <div class="nav-box">
        <div class="nav">
            <h1 class="left"><a class="logo" href="./index.html"></a></h1>
            <div class="nav-right">
                <ul class="nav-cate-right right">
                    <li>
                        <a href="#" class="firsta">二手优品<span class="hot-label"></span></a>
                    </li>
                    <li>
                        <a href="#" title="手机回收">手机回收</a>
                    </li>
                    <li>
                        <a href="#" title="手机维修">手机维修</a>
                    </li>
                    <li>
                        <a href="#" title="电脑维修">电脑维修</a>
                    </li>
                    <li>
                        <a href="#" title="以旧换新">以旧换新</a>
                    </li>
                    <li class="last">
                        <a href="#" title="手机租用">手机租用</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--    banner-->
    <div class="banner-box">
        <div id="scroll" class="scroll">
            <div id="box" class="box">
                <ul id="ul">
                    <li><img src="./images/bg1.png" /></li>
                    <li><img src="./images/bg2.png" /></li>
                </ul>
                <ol id="ol">
                    <li class="current"></li>
                    <li></li>
                </ol>
            </div>
        </div>
    </div>
    <!--   广告-->
    <div class="adv-box">
        <ul class="adv">
            <li><img src="./images/one.gif"></li>
            <li><img src="./images/two.png"></li>
            <li><img src="./images/three.png"></li>
        </ul>
    </div>
    <!--    热门手机回收-->
    <div class="hot-hs-product">
        <div class="tit">
            <h2 class="tit-inner">热门手机回收</h2>
        </div>
        <div class="cnt">
            <div class="cnt-inner">
                <div id="rm" class="cnt-left left">

                </div>
                <div class="cnt-right left">
                    <ul class="cnt-right-list">
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/01p-img.jpg">
                                </div>
                                <div class="p-name">手机名</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/01p-img.jpg">
                                </div>
                                <div class="p-name">手机名</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/01p-img.jpg">
                                </div>
                                <div class="p-name">手机名</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/01p-img.jpg">
                                </div>
                                <div class="p-name">手机名</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/01p-img.jpg">
                                </div>
                                <div class="p-name">手机名</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--   优品精选-->
    <div class="hot-lp-product">
        <div class="tit">
            <h2 class="tit-inner">优品精选</h2>
        </div>
        <div class="cnt">
            <div class="cnt-inner">
                <!--             最左侧广告位-->
                <div class="cnt-left left">
                    <a href="javascript:;">
                        <img src="./images/youpin.png">
                    </a>
                </div>
                <!--             右侧商品列表-->
                <div class="cnt-right left">
                    <ul class="cnt-right-list">
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/11p-img.jpg">
                                </div>
                                <div class="p-name">商品名称</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/11p-img.jpg">
                                </div>
                                <div class="p-name">商品名称</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/11p-img.jpg">
                                </div>
                                <div class="p-name">商品名称</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/11p-img.jpg">
                                </div>
                                <div class="p-name">商品名称</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="p-img">
                                    <img src="./images/11p-img.jpg">
                                </div>
                                <div class="p-name">商品名称</div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</section>
<!--底部-->
<footer></footer>
</body>
<script src="./js/change.js"></script>
<script>init()</script>
<script>
    // 获取热门手机回收
	const p1 = axios.get("/api/advList/1/3");
	const p2 = axios.get("/api/advList/2/3");
	const p3 = axios.get("/api/advList/3/1");
	const p4 = axios.get("/api/advList/4/1");
	axios.all([p1,p2,p3,p4]).then(axios.spread(function(s1,s2,s3,s4){
		const info = s3.data.advList[0];
        document.querySelector("#rm").innerHTML = (`
              <a title="${info.advTitle}" target="_blank" href="${info.advHref}">
                        <img src="/api/${info.advPic}">
                    </a>
        `)
    }))
</script>
</html>